<template>
    <baseModel ref="base" spellcheck="false" @touchmove.prevent>
        <router-view v-slot="{ Component }">
            <transition :name="`${index ? '' : 'animate__animated '}`"
                enter-active-class="animate__fadeInLeft animate__fast"
                leave-active-class="animate__fadeOutRight animate__faster" mode="out-in">
                <keep-alive ref="keepaliveRef">
                    <component :is="Component" :key="$route.fullPath" v-if="isRouterAlive && $route.meta.onCache" />
                </keep-alive>
            </transition>
            <transition :name="`${index ? '' : 'animate__animated '}`"
                enter-active-class="animate__fadeInLeft animate__fast"
                leave-active-class="animate__fadeOutRight animate__faster" mode="out-in">
                <component :is="Component" :key="$route.fullPath" v-if="!$route.meta.onCache" />
            </transition>
        </router-view>
    </baseModel>
</template>

<script setup>
import router from "@/router"
import * as echarts from 'echarts/core'
import { useRipple } from "@usehook"
import { setForceRefresh } from "@/hooks/useRequest"
import { keepaliveRef, removeKeepalive } from "@/utils/keepalive"
import { addEmitterListener } from "@/utils/eventbus"
import { useTemplateRef } from "vue"
import globalProvide from "@/utils/provide"
import iconfont from "@/assets/icon/iconfont.woff2?t=1689449444"
import fojiya from "@/assets/font/fojiya.ttf"
import { loadFont } from "@/utils/tools"
import storeInstance, { storeToRefs } from "@/pinia"
import { debounce } from 'lodash-unified'

const _ = window.ResizeObserver
window.ResizeObserver = class ResizeObserver extends _ {
    constructor(callback) {
        callback = debounce(callback, 100)
        super(callback)
    }
}

globalProvide()
let index = true
//body添加el-popup-parent--hidden,避免windows下dialog出现body偏移
document.body.classList.add('el-popup-parent--hidden')

watch(() => router.currentRoute.value.path, (value) => {
    index = value === "/"
})

let isRouterAlive = $ref(true)

const reload = () => {
    if (!isRouterAlive || router.currentRoute.value.path === '/') return
    isRouterAlive = false
    removeKeepalive(router.currentRoute.value.fullPath, false)
    setTimeout(() => {
        isRouterAlive = true
    }, 200)
}

const forbidRightClick = () => {
    document.oncontextmenu = () => {
        return false
    }
}

const forbidDragstart = () => {
    document.ondragstart = () => {
        return false
    }
}

const { getForceRefresh } = storeToRefs(storeInstance.mainStore)

setForceRefresh(getForceRefresh)

onMounted(() => {
    forbidRightClick()
    forbidDragstart()
    echarts.registerTheme('dansj', {
        textStyle: {
            fontFamily: 'font2', // 设置字体
            fontWeight: "bolder",
            fontSize: 14, // 设置字号
            // 可以继续设置其他全局样式
        }
    })
    keepaliveRef.value = useTemplateRef("keepaliveRef")
    addEventListener("keydown", (e) => {
        const { key } = e
        if (key === "F5") {
            e.preventDefault()
            storeInstance.mainStore.setForceRefresh()
            reload()
        }
    })
    addEmitterListener("refresh", () => {
        reload()
    })
    loadFont(iconfont)
    loadFont(fojiya)
})
useRipple(document.body)
</script>